<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>径向渐变</title>
		<style type="text/css">
			.ball {
				margin: 100px auto;
				width: 150px;
				height: 150px;
				border-radius: 50%;
				/* background-color: #FF6700; */
				background-image:radial-gradient(circle at center ,#fff ,#000) ;
				animation-name: ball;
				animation-duration: .8s;
				animation-timing-function: ease-in;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-fill-mode: forwards;
				/* transform: translateY(500px) */
			}
			.shadow {
				margin: 488px auto 0;
				width:200px;
				height: 30px;
				border-radius: 50%;
				background-color: #1C2234;
				filter: blur(20px);
				opacity: 0.5;
				animation-name: shadow;
				animation-duration: .8s;
				animation-timing-function: ease-in;
				animation-iteration-count: infinite;
				animation-direction: alternate;
			}
			@keyframes ball{
				
				to{
					transform: translateY(500px);
				}
			}
			@keyframes shadow{
				to{
					width:150px;
					filter: blur(10px);
					opacity: 0.8;
				}
			}
			.pic {
				filter: grayscale(1) blur(5px);
				transition: .5s;
			}
			.pic:hover {
				filter: grayscale(0) ;
			}
		</style>
	</head>
	<body>
		<div class="ball"></div>
		<div class="shadow"></div>
	<!-- 	<img class="pic" src="../8-2/1.jpg" > -->
	</body>
</html>
